<template>
    <div class="clist">
        <div class="sort">
            <dl v-for="item in sortlist" :key="item.id">
                <dt><img :src="item.sort" :alt="item.alt"></dt>
                <dd><img :src="item.sort_txt" :alt="item.alt"></dd>
            </dl>
        </div>
        <div><img :src="this.footimg" alt=""></div>
    </div>
</template>

<script>
export default {
    data(){
        return{
          sortlist:[
             {
                 "id":"01",
                 "sort_txt":require("@/assets/img/sort/sort_txt1.png"),
                 "sort":require("@/assets/img/sort/sort1.png"),
                 "alt":"sort图"
             },
              {
                 "id":"02",
                 "sort_txt":require("@/assets/img/sort/sort_txt2.png"),
                 "sort":require("@/assets/img/sort/sort2.png"),
                 "alt":"sort图"
             },
              {
                 "id":"03",
                 "sort_txt":require("@/assets/img/sort/sort_txt3.png"),
                 "sort":require("@/assets/img/sort/sort3.png"),
                 "alt":"sort图"
             },
             {
                 "id":"04",
                 "sort_txt":require("@/assets/img/sort/sort_txt4.png"),
                 "sort":require("@/assets/img/sort/sort4.png"),
                 "alt":"sort图"
             },
              {
                 "id":"05",
                 "sort_txt":require("@/assets/img/sort/sort_txt5.png"),
                 "sort":require("@/assets/img/sort/sort5.png"),
                 "alt":"sort图"
             },
              {
                 "id":"06",
                 "sort_txt":require("@/assets/img/sort/sort_txt6.png"),
                 "sort":require("@/assets/img/sort/sort6.png"),
                 "alt":"sort图"
             },
             {
                 "id":"07",
                 "sort_txt":require("@/assets/img/sort/sort_txt7.png"),
                 "sort":require("@/assets/img/sort/sort7.png"),
                 "alt":"sort图"
             },
              {
                 "id":"08",
                 "sort_txt":require("@/assets/img/sort/sort_txt8.png"),
                 "sort":require("@/assets/img/sort/sort8.png"),
                 "alt":"sort图"
             },
              {
                 "id":"09",
                 "sort_txt":require("@/assets/img/sort/sort_txt9.png"),
                 "sort":require("@/assets/img/sort/sort9.png"),
                 "alt":"sort图"
             }   
          ],
          footimg:require("@/assets/img/public/zjc.png")
        }
    }
}
</script>

<style scoped>
.clist{
    box-sizing: border-box;
    padding: .4rem;
}
img,.sort{
    width: 100%;
}
.sort{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;   
}
dl{
    width: 32%;  
}
dt,dl{
    margin-bottom: 3%;
}

</style>


